<template>
  <div>
    <div class="header">
      <el-button
        icon="el-icon-circle-plus-outline"
        @click="addDialog"
        size="small"
        type="primary"
      >新模板</el-button>
      <el-button icon="el-icon-refresh" @click="reload" size="small" type="primary">刷新</el-button>
    </div>
    <el-dialog title="创建模板" :visible.sync="dialogFormVisible">
      <el-form :model="dialogForm" :rules="dialogRules" ref="ruleForm">
        <el-form-item label="KEY" :label-width="formLabelWidth" prop="key">
          <el-input v-model="dialogForm.key"></el-input>
        </el-form-item>
        <el-form-item label="名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="dialogForm.name"></el-input>
        </el-form-item>
        <el-form-item label="描述" :label-width="formLabelWidth" prop="desc">
          <el-input v-model="dialogForm.desc"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogSave('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="ID" width="180" align="center"></el-table-column>
      <el-table-column prop="name" label="名称" width="180" align="center"></el-table-column>
      <el-table-column prop="key" label="KEY" align="center"></el-table-column>
      <el-table-column prop="deploymentId" label="部署ID" align="center"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
      <el-table-column prop="lastUpdateTime" label="最后更新时间" align="center"></el-table-column>
      <el-table-column fixed="left" label="操作" width="150" align="center">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">部署</el-button>
          <el-button @click="editHandleClick(scope.row)" type="text" size="small">编辑</el-button>
          <el-button @click="deleteHandleClick(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      nodeId: "",
      dialogFormVisible: false,
      dialogForm: {
        name: "",
        key: "",
        desc: ""
      },
      dialogRules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        key: [{ required: true, message: "请输入KEY", trigger: "blur" }],
        desc: [{ required: true, message: "请输入描述", trigger: "blur" }]
      },
      formLabelWidth: "80px"
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.$get("/processManagement/list").then(data => {
        if (data.data.success) {
          this.tableData = data.data.result.dataList;
        }
      });
    },
    addDialog(){
      this.dialogFormVisible = true
      this.dialogForm.name = '' 
      this.dialogForm.key = '' 
      this.dialogForm.desc = '' 
    },
    reload() {
      this.init();
    },
    dialogSave(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$post("/processManagement/create", {
            key: this.dialogForm.key,
            name: this.dialogForm.name,
            description: this.dialogForm.description
          }).then(data => {
            this.$mess(data);
            this.init();
          });
          this.dialogFormVisible = false;
        } else {
          
          return false;
        }
      });
    },
    handleClick(row) {
      this.$patch("/processManagement/deploy/" + row.id).then(data => {
        if (data.data.success) {
          this.$mess(data.data);
          this.init()
        }
      });
    },
    editHandleClick(row) {
      window.open("http://192.168.1.132:9000/modeler.html?modelId=" + row.id);
      // window.open(");
      // window.open("http://192.168.1.132:9000/modeler.html?modelId="+row.id+",'_blank','width=300,height=200,menubar=no,toolbar=no,status=no,scrollbars=yes")
    },
    deleteHandleClick(row) {
      // this.$get('/process/delete/',{
      //   modelId:row.id
      // }).then(data=>{
      //   this.$mess(data)
      // })
      this.$delete("/processManagement/delete/" + row.id).then(data => {
        if (data.data.success) {
          this.$mess(data.data);
          this.init()
        }
      });
    }
  }
};
</script>

<style scoped lang="css">
</style>
